﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/style4.css" />
		<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
		<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
		<style>
			span{
				font-size: 16px;
			}
			#baoCunAlert{
				width: 50%;
				height: 100px;
				border: 0.5px solid #ccc;
				background: rgba(0,0,0,.6);
				text-align: center;
				line-height: 100px;
				color: white;
				border-radius: 10px;
				z-index: 6;
				display: none;
				position: fixed;
				top: 40%;
				left: 25%;
			}
			#yourName{
				border: none;
				outline:none;
			}
			#sex,#address{
				display: inline-block;
				width: 80%;
				height: 50px;
			}
			#sexOptions{
				width: 90%;
				height: 100px;
				z-index: 999;
				display: none;
				text-align: center;
				border-radius: 10px;
				background: white;
				color: blue;
				position: fixed;
				bottom: 70px;
				left: 5%;
			}
			#sexOptions>div{
				height: 50px;
				line-height: 50px;
				box-sizing: border-box;
			}
			#male{
				border-bottom: 1px solid #ccc;
			}
			#mengBan{
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,.5);
				z-index: 99;
				display: none;
				position: fixed;
				top: 0px;
				left: 0px;
			}
			#mengBan>div{
				width: 90%;
				height: 50px;
				line-height: 50px;
				text-align: center;
				border-radius: 10px;
				background: white;
				color: blue;
				position: absolute;
				bottom: 10px;
				left: 5%;
			}
			.picker-item{
				font-size: 14px;
			}
			.picker-modal{
				position: fixed;
				left: 5%;
				bottom: 70px;
				width: 90%;
				height: 13rem;
				z-index: 999;
				display: none;
				transition-duration: 0.001s !important;
				background: white;
				border-radius: 10px;
				overflow: hidden;
			}
			.picker-modal h1{
				color: blue;
			}
			.picker-item.picker-selected {
				font-size: 16px;
				color: blue;
			}
		</style>
	</head>
	<body>
		<div class="Title">
			<div class="FanHui" onclick="javascript:history.back(-1);">
				<img src="img/turnBack.png" />
			</div>
			<div id="baoCun" class="informationBaoCun fr">
				保存
			</div>
		</div>
		<div class="informationBody">
			<div class="informationClass">
				<div>
					<span>头像</span>
					<span class="informationTouXiang">
						<img src="img/my_touXiang.jpg" />
					</span>
				</div>
				<hr />
				<div id="userName">
					<span>昵称</span>
					<input id="yourName" type="text" value="巴黎的街角" />
					<span id="clearName" class="informationClose">
						<img src="img/information_close.png" />
					</span>
				</div>
				<hr />
				<div class="clearfix">
					<span class="fl">性别</span>
					<span id="sex" class="fl">
						
					</span>
				</div>
				<hr />
				<div class="clearfix">
					<span class="fl">所在地</span>
					<span id="address" class="fl">
						<div class="page-group" style="width: 80%; height: 50px; margin-left: 20%; z-index: 2 !important;">
							<div class="page page-current" style="width: 100%; height: 50px;">
								<input style="width: 100%; height: 50px; outline: none; border: none;" type="text" id='city-picker' />
							</div>
						</div>
					</span>
				</div>
			</div>
			<div class="informationJianJie">
				<h2>简介</h2>
				<textarea>我们走的很远，还记得自己最初的模样吗？</textarea>
			</div>
		</div>
		<div id="mengBan">
			<div id="quXiaoBtn">取消</div>
		</div>
		<div id="sexOptions">
			<div id="male">男</div>
			<div id="female">女</div>
		</div>
		<div id="baoCunAlert">
			保存成功 !
		</div>
		
		<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
		<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
		<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
		<script type="text/javascript" src="//g.alicdn.com/msui/sm/0.6.2/js/sm-city-picker.min.js" charset="utf-8"></script>
		<script>
			baoCun.onclick = function(){
				baoCunAlert.style.display = "block";
				setTimeout(function(){
					baoCunAlert.style.display = "none";
				},1000);
			};
			clearName.onclick = function(){
				yourName.value = "请输入昵称";
				yourName.style.color = "#666";
			};
			yourName.onclick = function(){
				yourName.style.color = "";
				if(yourName.value == "请输入昵称"){
					yourName.value = "";
				}
			};
			
			sex.onclick = function(){
				mengBan.style.display = "block";
				sexOptions.style.display = "block";
			};
			address.onclick = function(){
				mengBan.style.display = "block";
				quXiaoBtn.innerHTML = "确定";
			};
			mengBan.onclick = function(){
				mengBan.style.display = "none";
				sexOptions.style.display = "none";
			};
			male.onclick = function(){
				sex.innerHTML = "男";
				mengBan.style.display = "none";
				sexOptions.style.display = "none";
			};
			female.onclick = function(){
				sex.innerHTML = "女";
				mengBan.style.display = "none";
				sexOptions.style.display = "none";
			};
			
			$("#city-picker").cityPicker({
				toolbarTemplate: '<header class="bar bar-nav">\<h1 class="title">选择您所在的地址</h1>\</header>'
			});
		</script>
	</body>
</html>
